<template>
  <div class="balance">
    <mt-header title="账户余额">
      <router-link to="/user" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="ref-header">
      <div class="ref-top1">账户余额</div>
      <div class="ref-top2">￥<span>{{balance}}</span></div>
      <button class="sign-btn" @click="tixian">提现</button>
    </div>
    <div>
      <mt-cell v-for="(item, index) of list" :key="index" class="border-bottom" :label="item.date" :title="item.memo">
        <span :style="item.status===1?'color: green':'color: red'">{{item.money}}</span>
      </mt-cell>
    </div>
  </div>
</template>

<script>
import { MessageBox, Toast } from 'mint-ui'
import axios from 'axios'
export default {
  name: 'Balance',
  data () {
    return {
      balance: '',
      list: []
    }
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/member/getBalanceRecord', {
        params: {
          memberId: this.$store.state.userId
        }
      }).then((res) => {
        console.log(res)
        let datas = res.data
        if (datas.code === 0) {
          this.balance = datas.balance
          this.list = datas.array
        }
      })
    },
    tixian () {
      MessageBox.prompt('请输入提现金额').then(({ value, action }) => {
        this.handlePay(parseInt(value))
      })
    },
    handlePay (value) {
      axios.get('/meimai/interface/withdrawCash/save', {
        params: {
          memberId: this.$store.state.userId,
          money: value
        }
      }).then((res) => {
        if (this.balance < value) {
          Toast({
            message: '金额不能大于账户余额',
            iconClass: 'iconfont icon-shibai1 icon-font36'
          })
          return
        }
        if (value < 0 || !value) {
          Toast({
            message: '金额不能小于0',
            iconClass: 'iconfont icon-shibai1 icon-font36'
          })
          return
        }
        if (res.data.code === 0) {
          Toast({
            message: '申请成功，正在审核',
            iconClass: 'iconfont icon-chenggong icon-font36'
          })
        }
      })
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>

<style lang="stylus" scoped>
.mint-header
  background: #e00000
.ref-header
  width: 100%
  height: 3rem
  padding: 0.2rem
  overflow: auto
  background: #ec2935
  text-align: center
  color: #fff
  .ref-top1
    font-size: .4rem
    line-height: .8rem
  .ref-top2
    font-size: .3rem
    line-height: .6rem
    span
      font-size: .5rem
  .sign-btn
    width: 2.8rem
    height: .8rem
    line-height: .8rem
    text-align: center
    color: #fff
    border-radius: .8rem !important
    font-size: .5rem
    margin: .2rem auto 0 auto
    background-color: #f79500
</style>
